<!doctype html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>规格轨迹</title>
    <link rel="stylesheet" type="text/css" href="/webapp/css/easyui.css">
    <link rel="stylesheet" type="text/css" href="/webapp/css/icon.css">
    <link rel="stylesheet" type="text/css" href="/webapp/css/color.css">
    <link rel="stylesheet" type="text/css" href="/webapp/css/public.css">
    <script type="text/javascript" src="/webapp/js/lib/jquery.min.js"></script>
    <script type="text/javascript" src="/webapp/js/lib/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/webapp/js/lib/jquery.global.settings.js"></script>
    <script type="text/javascript" src="/webapp/js/lib/ajaxfileupload.js"></script>

    <script type="text/javascript" src="/webapp/js/common/config.js"></script>
    <script type="text/javascript" src="/webapp/js/lib/Jquery.easyui.tooltip.js"></script>
    <style type="text/css">
        #taskList {
            border: 1px solid #959595;
        }
        #taskList tr th{
            background-color: #6ecac5;
        }
        #taskList tr th, #taskList tr td {
            border: 1px #d6d6d6 dashed;
            font-size: 15px;
            text-align: center;
            height: 30px;
        }

    </style>
</head>
<body>
<div class="easyui-container-fluid">
    <div class="easyui-panel" style="border: none;">
        <div class="nav" id="nav"></div>
        <div class="easyui-panel" style="border:none;">
            <form id="ff">
                <div style="margin-bottom:20px;">

                    <label class="item-label">型号码：</label>
                    <input type="text" class="easyui-textbox" name="modelCode" style="width:100px">
                    <a href="javascript:void(0);" class="easyui-linkbutton c8" onclick="searchBy()" style="width:80px;margin-left: 40px;">查询</a>
                </div>

            </form>
        </div>
        <div class="table-wrapper">
            <table id="datagrid" data-options="fitColumns:true,scrollBarSize:0">
                <thead>
                <tr>
                    <th data-options="field:'id',checkbox:true,align:'center'"></th>
                    <th data-options="field:'modelCode',align:'center'" width="80">型号码</th>
                    <th data-options="field:'wproperties',align:'center'"formatter="properties" width="280">原规格</th>
                    <th data-options="field:'cproperties',align:'center'"formatter="properties" width="280">新规格</th>
                    <th data-options="field:'operateUser',align:'center'" width="40">操作人</th>
                    <th data-options="field:'action',align:'center',formatter:actions" width="40">操作</th>
                    <th data-options="field:'createTime',align:'center'" width="120">操作时间</th>

                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    <div id="taskListText" class="easyui-window upload-wrapper" title="规格差异" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:800px;height: 600px;padding:10px;">
        <table id="taskList" style="width: 100%;" cellspacing="0" >
           <thead><tr>
               <td>a</td>
               <td>a</td>
               <td>a</td>


           </tr></thead>
            <tbody>
            <tr>
                <td>b</td>
                <td>b</td>
                <td>b</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
<script type="text/javascript">
    function initPage() {
        initUserCategorySelect("categorySelect",function (code) {
            categoryCode = $("#categorySelect").combobox("getValue");
            initBrandSelectC("brandSelect",function () {initSeries(categoryCode,"brandSelect")},null,code);
        });
        searchBy(1,100);
    }
    $(function(){
        var height = $(window).height();
        var nav_height = $("#nav")._outerHeight();
        var ff_height = $("#ff").height();
        var table_height = height-nav_height-ff_height-40;
        $("#datagrid").css("max-height",table_height);
        $("#datagrid").datagrid({
            rownumbers:true,
            pagination:true,
            idField:"id",
            checkOnSelect:false,
            onLoadSuccess:function(data){
                $("#datagrid").datagrid("clearChecked");

                var tableTd = $('div.datagrid-body td[field="wrongModelName"]'); //productname是列名
                tableTd.each(function () {
                    var $this = $(this);
                    var index = $this.parent('tr').attr('datagrid-row-index');
                    var rows =  $('#datagrid').datagrid('getRows');
                    var currentRow = rows[index];
                    var content = '<div style=" max-width:700px;word-break: break-all; word-wrap: break-word;">' + currentRow.wrongModelName + '</div>'; //productname是列名
                    $this.tips({ content: content, wrapColor: 'black' });
                });
            },
        }).datagrid("getPager").pagination({
            onSelectPage:searchBy
        });
        aRecords("规格轨迹","/webapp/pages/product/modifyRecord/mUpdate")
        initPage();
    });

    function searchBy(page,size) {
        var dtd = $.Deferred();
        var data = getFormData(document.getElementById("ff"));
        var pager = {page:page,size:size};
        if(!size){
            pager['page']= 1;
            pager['size'] = $("#datagrid").datagrid("getPager").pagination("options").pageSize||100;
        }
        var jsonobj = {};
        jsonobj = $.extend(true,jsonobj,transfer(data));
        jsonobj = JSON.stringify(jsonobj);
        // console.log(jsonobj)
        $.ajax({
            url:config.url + "/modifyRecord/metadataUpdate?"+transfer2url(pager),
            type:'post',
            data:jsonobj,
            contentType:"application/json;charset=UTF-8",
            dataType:'json',
            xhrFields:{withCredentials:true},
            beforeSend:function () {
                $.messager.progress({
                    title:"请稍等",
                    interval:50,
                    text:"数据加载中..."
                });
            },
            complete:function () {
                $.messager.progress("close");
            },
            success:function (data) {
                $.messager.progress("close");
                if(data){
                    globalData = data;
                    $("#datagrid").datagrid("loadData",data);
                    dtd.resolve();
                }
            },
            error:function (XMLHttpRequest,textStatus,errorThrown) {

            }
        });
        return dtd.promise();
    }
    function styleg(text){
        if(text){
            return '<span style="font-size: 14px;font-weight: bold;color: #4fc8d6;">' + text + '</span>';
        }else{
            return;
        }

    }
</script>
<!--
<script type="text/javascript" src="/webapp/js/common/pagelist.js"></script>
-->
<script type="text/javascript">
    function actions(val, row){
        var vp ="";
        if(row.vproperties){
            var value=[];
            value=row.vproperties;
            for(i in value ){
                vp=vp+"<tr><td>"+value[i].code+"</td><td>"+value[i].wvalue+"</td><td>"+value[i].cvalue+"</td></tr>"
            }
        }
        return "<a href='javascript:void(0);' class='easyui-linkbutton l-btn l-btn-small' "+
            "style='width:60px;' onclick='details(\"" + vp + "\")'>差异</a>";
    }

    $("#ff").keydown(function (event) {
        var e = event || window.event;
        var keyCode = e.keyCode || e.which;
        if(keyCode=="13"){
            searchBy();
        }
    });
    function properties(value) {
        var pp="";
        if(value){
            value.forEach(function (v) {
                pp=pp+ v.code+":"+v.value+";"
            })
        }
        return pp;
    }
    function details(value) {
        var msg="<thead><tr><th style='width:10%'>规格码</th><th style='width:8%'>原规格</th><th style='width:8%'>新规格</th> </tr></thead>";
        if(value){
            msg=msg+"<tbody> "+value+"</tbody> ";
        }else{
            msg=msg+"<tr><td colspan='3' >未比较出差异</td></tr>";

        }
        document.getElementById("taskList").innerHTML =msg;
        $("#taskListText").window("open");
    }
</script>
</html>
